<template>
    <div>
        <el-row>
            <el-col :span="12" :offset="6">
                <el-row style="min-height: 290px">
                    <el-table :data="pageData"
                              :header-cell-style="this.$store.state.headerCssObj"
                              :cell-style="this.$store.state.cellCssObj"
                              border>
                        <el-table-column
                                prop="attendanceDay"
                                label="考核时间">

                        </el-table-column>
                        <el-table-column
                                prop="situation"
                                label="考核情况">

                        </el-table-column>
                    </el-table>

                </el-row>
                <el-row style="margin-top: 20px;text-align: center">
                    <paging :obj="pagingData"></paging>

                </el-row>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "checkAttendance",
        computed: {
            pagingData() {
                var that = this;
                return {
                    pageSize: 5,//一页展示几条数据
                    pagerCount: 5,//超过多少页打点省略
                    currentChange(num) {        //改变当前页
                        console.log(num);
                        that.currentPage = num
                    },
                    total: this.tableData.length,//一共有几条数据
                }
            },
            tableData(){
                return this.pageDataExchange(this.$store.state.workPageStore.attendanceData)
            },
            pageData(){
               return this.tableData.slice((this.currentPage-1)*5,this.currentPage*5)
            },
        },
        data() {
            return {


                // tableData: [
                //     {AttendanceDay: '2020-03-25 08:00:00', Situation: 0},
                //     {AttendanceDay: '2020-03-26 08:00:00', Situation: 1},
                //     {AttendanceDay: '2020-03-25 08:00:00', Situation: 0},
                //     {AttendanceDay: '2020-03-26 08:00:00', Situation: 1},
                //     {AttendanceDay: '2020-03-25 08:00:00', Situation: 0},
                //
                // ],

                currentPage: 1,
            }
        },
        created(){
            this.checkAttendanceInfo()
        },
        methods:{
            ...mapActions(['checkAttendanceInfoAct']),
            checkAttendanceInfo(){
                let obj = {
                    staffId :this.$store.state.user.userId
                    // staffId: 1
                }
                this.checkAttendanceInfoAct(obj)
            },
            /* 时段数据转换*/
            pageDataExchange(data) {
                let arr = []
                for (let item of data) {
                    if (item.situation === 0) {
                        item.situation = '正常'
                    } else if (item.situation === 1) {
                        item.situation = '缺勤'
                    }else if (item.situation === 2) {
                        item.situation = '迟到'
                    }else if (item.situation === 3) {
                        item.situation = '早退'
                    }else if (item.situation === 4) {
                        item.situation = '自愿加班'
                    }
                    arr.push(item)
                }
                return arr
            },
        },
    }
</script>

<style scoped>

</style>